import React, { Component } from 'react'
import { Card, Icon, Menu, Table } from 'antd'
import { FormattedMessage } from 'react-intl'
import { TwsReactMarkdownPreview } from 'tws-antd'
import TaskView from './program-introduce-tag-pane/task-view'
import { connect } from 'react-redux'
import * as programActions from '../../../actions/program'
import { withRouter } from 'react-router-dom'

class TutorProgramIntroductionMenuBox extends Component {
  constructor (props) {
    super(props)
    this.state = {
      currentType: 'introduction'
    }
  }
  componentDidMount () {
    this.props.getProgram(this.props.programId)
    this.props.getLeaderBoards(this.props.programId)
    this.props.getTopicTasks(this.props.programId)
  }

  render () {
    const {introduction} = this.props.programInfo
    const {leaderBoard} = this.props.leaderBoard
    const {topicsTasks} = this.props
    const columns = [{
      title: <FormattedMessage id='名次' />,
      dataIndex: 'index',
      render: (text, record, index) => (
        <span>{index + 1} </span>
      )
    }, {
      title: <FormattedMessage id='姓名' />,
      dataIndex: 'name'
    }, {
      title: <FormattedMessage id='答题数' />,
      dataIndex: 'finishHomeworkCount'
    }, {
      title: <FormattedMessage id='答题积分' />,
      dataIndex: 'finishHomeworkPoint'
    }]
    return <div><Menu
      onClick={(e) => this.setState({currentType: e.key})}
      selectedKeys={[this.state.currentType]}
      mode='horizontal'>
      <Menu.Item key='introduction'>
        <Icon type='rocket' /><FormattedMessage id='训练营介绍' />
      </Menu.Item>
      <Menu.Item key='assignment' disabled={!topicsTasks.length}>
        <Icon type='gift' /><FormattedMessage id='任务卡' />
      </Menu.Item>
      <Menu.Item key='scoreboard'>
        <Icon type='trophy' /><FormattedMessage id='任务卡积分榜' />
      </Menu.Item>
    </Menu>
      {this.state.currentType === 'introduction'
        ? <div className='mark-down-wrap introduction'>
          <TwsReactMarkdownPreview source={introduction} />
        </div> : ''
      }
      {this.state.currentType === 'assignment'
        ? <div className='introduction'>
          <TaskView programId={this.state.programId} topicsTasks={this.props.topicsTasks} />
        </div> : ''
      }
      {this.state.currentType === 'scoreboard'
        ? <div className='introduction'>
          <Card title='Top 10' noHovering>
            <Table rowKey={record => record.id}
              columns={columns}
              dataSource={leaderBoard}
              bordered pagination={false} />
          </Card>
        </div> : ''
      }
    </div>
  }
}

const mapStateToProps = state => ({
  programInfo: state.program,
  leaderBoard: state.leaderBoard,
  topicsTasks: state.topicsTasks
})

const mapDispatchToProps = dispatch => ({
  getProgram: (programId) => dispatch(programActions.getProgramIntroduction(programId)),
  getLeaderBoards: (programId) => dispatch(programActions.getLeaderBoards(programId)),
  getTopicTasks: (programId) => dispatch(programActions.getTopicTasks(programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TutorProgramIntroductionMenuBox))
